<!--
 * @Description: 全局 树 组件
-->
<template>
  <el-tree
    v-bind="{ ...$props, ...$attrs }"
    ref="treeRef"
    highlight-current
    :icon="h(GIcon, { type: 'c-mian-you' })"
  >
    <template #default="{ node, data }">
      <div class="custom-tree-node" :class="[{ disabled: node.disabled }]">
        <div class="node-item">
          <slot name="leftIcon" :node="node" :data="data"> </slot>
          <div v-ellTooltip>{{ data.nodeName || '-' }}</div>
        </div>
        <slot name="rightIcon" :node="node" :data="data"></slot>
      </div>
    </template>
  </el-tree>
</template>
<script lang="ts" setup>
import { Ref, ref, defineExpose, h } from 'vue';
import { ElTree } from 'element-plus';
import { GIcon } from '@/components/GIcon/index';

const treeRef: Ref = ref();

interface Tree {
  id: number;
  label: string;
  isPenultimate?: boolean;
  children?: Tree[];
}
defineExpose({
  treeRef
});
</script>

<style lang="scss" scoped>
.el-tree {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 10px 4px;
  :deep(.el-icon.el-tree-node__expand-icon) {
    margin-left: 14px;
  }
  :deep(.el-tree-node__content) {
    height: 36px;
    border: 1px solid transparent;
    border-radius: 4px;
    padding-left: 36px;
    padding-right: 18px;
    font-size: 14px;
    color: #435970;
    .handle-button {
      display: none;
    }
  }
  :deep(.el-tree-node__content:hover) {
    background: #edf2f7;
    border-radius: 3px;
    box-sizing: border-box;
    .handle-button {
      display: block;
    }
  }
  :deep(.is-current:not(.tree-disabled) > .el-tree-node__content:not(:hover)) {
    background-color: #ffff;
    // color: #03ac82;
  }
  :deep(.el-tree-node__expand-icon) {
    color: #979797;
  }
  :deep(.el-tree-node__expand-icon.is-leaf) {
    color: transparent;
  }
  :deep(.is-drop-inner > .el-tree-node__content) {
    border: 1px solid #03ac82;
    box-sizing: border-box;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .node-item {
      width: calc(100% - 20px);
    }
  }
  .custom-tree-node.disabled {
    color: #a9aeb3;
    cursor: not-allowed;
  }
  :deep(.el-tree--highlight-current) {
    .el-tree-node__content {
      background-color: transparent;
    }
  }
}
</style>
